import React from 'react';
import { Space, Layout, Form, Input, Radio } from 'antd';
import { CloseOutlined } from '@ant-design/icons';

import "./SenqingQuxiao.scss";

const { Header, Footer, Sider, Content } = Layout;
const { TextArea } = Input;

interface Props { }

function SenqingQuxiao(props: Props) {
    return (
        <div className='senqingQuxiao'>
            {/* 申请取消 */}
            <div className='senqingQuxiao-box'>
                <Space direction="vertical" style={{ width: '100%' }} size={[0, 48]}>
                <Layout>
                    <Header className='senqingQuxiao-header'>
                        <div>申请取消</div>
                        <div><CloseOutlined /></div>
                    </Header>
                    <Content className='senqingQuxiao-content'>
                        <Form>
                            <Form.Item className='content-bigBox' label="取消原因">
                                <TextArea className='bigBox-padding' rows={4} />
                            </Form.Item>
                            <Form.Item className='content-box' label="设置取消时间">
                                <Radio.Group>
                                    <Radio value="apple"> 立即取消 </Radio>
                                    <Radio value="pear"> 预订取消时间 </Radio>
                                </Radio.Group>
                            </Form.Item>
                        </Form>
                    </Content>
                    <Footer className='senqingQuxiao-footer'>
                        <div>
                            <button className='footer-button'>确定</button>
                            <button>取消</button>
                        </div>
                    </Footer>
                </Layout>
            </Space>
            </div>
            
        </div>
    );
}

export default SenqingQuxiao;